<!--
 * @Author: windys
 * @Description: 
 * @Date: 2021-12-11 10:19:24
-->
<template>
    <div class="chart_container">
        <div id="pieChart" :style="{ width: '100%', height: '350px' }"></div>
    </div>
</template>


<script lang="ts">
import { nextTick } from 'process'
import { defineComponent, getCurrentInstance, onMounted, reactive } from 'vue'

export default defineComponent({
    setup() {
        const { proxy }: any = getCurrentInstance()
        onMounted(() => {
            init()
        })
        const options = reactive({
            title: {
                text: 'Referer of a Website',
                subtext: 'Fake Data',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        { value: 1048, name: 'Search Engine' },
                        { value: 735, name: 'Direct' },
                        { value: 580, name: 'Email' },
                        { value: 484, name: 'Union Ads' },
                        { value: 300, name: 'Video Ads' }
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        })
        const init = () => {
            console.log('init')
            let myChart = proxy.$echarts.init(document.getElementById("pieChart"));
            document.getElementById('pieChart').setAttribute('_echarts_instance_', '')
            myChart.setOption(options);
            nextTick(() => {
                myChart.resize()
            })
            window.onresize = function () {
                nextTick(() => {
                    myChart.resize()
                })
            }
        }
        return {
            options
        }
    },
})
</script>

<style lang="scss" scoped>
.chart_container {
    overflow: hidden;
    width: 96%;
    margin: 0 auto;
    height: 350px;
    overflow: hidden;
    height: 380px;
    margin: 25px 0;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>
